<template>
  <div class="settings-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="设置"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-avatar">
        <AvatarDisplay :name="userInfo?.name || ''" />
      </div>
      <div class="user-info">
        <div class="user-name">{{ userInfo?.name || '未登录' }}</div>
        <div class="user-position">{{ getUserPosition(userInfo) }}</div>
      </div>
    </div>

    <!-- 设置列表 -->
    <div class="settings-list">
      <!-- 退出登录按钮 -->
      <van-button 
        class="logout-btn" 
        block 
        @click="showLogoutConfirm"
        :loading="logoutLoading"
      >
        退出登录
      </van-button>
    </div>

    <!-- 退出确认弹窗 -->
    <van-dialog
      v-model:show="showLogoutDialog"
      title="确认退出"
      message="确定要退出登录吗？"
      show-cancel-button
      @confirm="handleLogout"
      :loading="logoutLoading"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import AvatarDisplay from '@/components/UserAvatar/AvatarDisplay.vue'
import { storage } from '@/utils/storage'
import type { UserInfo } from '@/api/user'

const router = useRouter()
const userInfo = ref<UserInfo | null>(null)
const showLogoutDialog = ref(false)
const logoutLoading = ref(false)

// 获取用户职位
const getUserPosition = (user: UserInfo | null) => {
  if (!user) return ''
  if (user.ceo === 1) return 'CEO'
  if (user.hr === 1) return '出纳'
  if (user.admin === 1) return '管理员'
  return '员工'
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 显示退出确认弹窗
const showLogoutConfirm = () => {
  showLogoutDialog.value = true
}

// 处理退出登录
const handleLogout = async () => {
  try {
    logoutLoading.value = true
    
    // 清理用户数据
    storage.logout()
    
    // 显示退出成功提示
    showToast('退出成功')
    
    // 延迟跳转到登录页，让用户看到提示
    setTimeout(() => {
      // 跳转到登录页，并带上当前页面作为重定向目标
      const currentPath = router.currentRoute.value.fullPath
      router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
    }, 1000)
  } catch (error) {
    console.error('退出登录失败:', error)
    showToast('退出失败，请重试')
  } finally {
    logoutLoading.value = false
    showLogoutDialog.value = false
  }
}

// 页面加载时获取用户信息
onMounted(() => {
  const storedUserInfo = storage.getUserInfo()
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
  }
})
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 16px;
}

.user-card {
  margin-top: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 4px;
}

.user-position {
  font-size: 14px;
  color: #969799;
}

.settings-list {
  margin-top: 24px;
}

.logout-btn {
  margin-top: 32px;
  height: 44px;
  font-size: 16px;
  background-color: #ee0a24;
  border: none;
  color: #fff;

  &:active {
    background-color: #cf0920;
  }
}
</style>